<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/crm/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/crm/css/public.css" media="all">
    <link rel="stylesheet" href="/static/crm/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <style>
        .layui-table th {
            font-weight: bold;
            color: #333333;
            text-align: center;
        }

        .layui-table {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">

            <script type="text/html" id="toolbarDemo">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" style="background-color: #393D49;" lay-event="refresh"><i class="fa fa-refresh layui-anim-rotate "></i></button>
                    <button class="layui-btn-disabled layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="restore" id="restore"> <i class="fa fa-rotate-left"></i> 还原 </button>
                    <button class="layui-btn layui-btn-sm data-add-btn" lay-event="restores"> <i class="fa fa-rotate-left"></i> 还原全部 </button>
                </div>
            </script>

            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

            <script type="text/html" id="currentTableBar">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="restore"> <i class="fa fa-rotate-left"></i> 还原 </button>
            </script>

        </div>
    </div>
    <script src="/static/crm/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'table', 'jquery', 'layer'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                table = layui.table;

            table.render({
                elem: '#currentTableId',
                url: '/crm/product.campus/recyleList',
                toolbar: '#toolbarDemo',
                cols: [[
                    { type: "checkbox", width: 50, fixed: 'left' },
                    { field: 'id', width: 60, title: 'ID', sort: true },
                    { field: 'name', title: '名称' },
                    { field: 'delete_time', title: '删除时间', sort: true },
                    { title: '操作', width: 90, minWidth: 80, toolbar: '#currentTableBar', align: "center", fixed: 'right' }
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 10,
                page: true,
            });

            // toolbar监听事件
            table.on('toolbar(currentTableFilter)', function (obj) {
                if (obj.event === 'restore') {  // 监听还原
                    var checkStatus = table.checkStatus('currentTableId')
                        , ids = []
                        , data = checkStatus.data;
                    if (data.length > 0) {  // 获取多条选中id
                        for (const i in data) ids.push(data[i].id);
                        ajaxRequest('/crm/product.campus/restore', ids, '还原已选中数据？');
                    }
                } else if (obj.event === 'restores') {  // 监听还原全部
                    ajaxRequest('/crm/product.campus/restore', '', '还原全部数据？');
                } else if (obj.event === 'refresh') {  // 监听刷新操作
                    table.reload('currentTableId', {
                        page: { curr: 1 }
                    });
                }
            });

            //监听表格复选框选择
            table.on('checkbox(currentTableFilter)', function (obj) {
                if ($('.layui-form-checked').length >= 1) {
                    $("#restore").removeClass("layui-btn-disabled");
                    $("#destroy").removeClass("layui-btn-disabled");
                } else {
                    $("#restore").addClass("layui-btn-disabled");
                    $("#destroy").addClass("layui-btn-disabled");
                }
            });

            // tool监听事件
            table.on('tool(currentTableFilter)', function (obj) {
                var data = obj.data,
                    _id = data.id;   // 获取id
                if (obj.event === 'restore') {  // 监听还原
                    ajaxRequest('/crm/product.campus/restore', _id, '确定还原数据？');
                }
            });

            // ajax请求
            function ajaxRequest(url, data, title) {
                layer.confirm(title, function (index) {
                    $.ajax({
                        url: url,
                        type: 'POST',
                        dataType: 'json',
                        data: {id: data},
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg(res.msg);
                                layer.close(index);
                                table.reload('currentTableId', {  // 'table' 为table的 id
                                    scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                                });
                            }
                            layer.msg(res.msg);
                        }
                    });
                });
            }
        });
    </script>

</body>

</html>